<!-- <template>
  <div class="overview">
    <div style="padding-bottom: 180px">
      <h3 style="margin-bottom: 100px">航科的产品与服务</h3>
      <div>
        <img src="../assets/image/system.png" alt="" class="product" />
      </div>
    </div>

    <div>
      <h3>
        企业简介
      </h3>
      <div class="group groupNew">
        <img src="../assets/image/ywgk_map.png" alt="" class="map" />
        <div style="width: 40%;">
          <div>
            沈阳航科智能系统有限公司是由上海颐健互联网科技有限公司和沈阳罗泰智能系统有限公司，共同投资成立的北方区服务中心，总部位于上海，2021年被评为国家高新技术企业。
          </div>
          <div style="margin:40px 0;">
            公司专注于智慧工厂系统集成服务，依托旗下数字化、智能化、零碳化转型领域的核心技术，为全球客户提供自动化产线设计与制造、AI智能硬件研发、数字化解决方案、企业全流程数字化管理及工业互联网安全等综合服务。
          </div>
          <div>
            客户企业包括索尼（中国）、葛兰素史克等世界500强企业；国电南网、上汽等国内一线大厂。同时，作为拥有自主可控工业互联网软件技术的企业，成为新松机器人、东软股份、华为辽宁数字化解决方案的战略合作伙伴。
          </div>
        </div>
      </div>
    </div>
    <div class="bg">
      <div class="area ">
        <h3 style="margin: 80px 0 80px">
          核心技术
        </h3>
        <div>
          <div class="case">
            <div v-for="(item, index) in data" :key="index" @mouseenter="hover1(index)"
              :class="hoverIndex1 == index ? 'active' : ''">
              <div v-show="hoverIndex1 == index"></div>
              <div class="content">
                <h3 class="title">{{ item.id }}</h3>
                <p class="title">{{ item.title }}</p>
                <ul v-for="(data, i) in item.list" :key="i" class="list">
                  <li :style="{ color: data.status == 1 && hoverIndex1 == index ? '#3C9BC7FF' : '', }">
                    {{ data.message }}
                  </li>
                </ul>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div>
      <h3 style="position: relative; top: 50px">
        公司技术带头人
      </h3>
      <div class="group" style="margin: 80px 0 40px;">
        <div style="margin: 0 10% ;display: flex;justify-content: space-between;">
          <div>
            <img src="../assets/image/HK/person.jpg" alt="" class="person" />
            <div style="font-size: 28px;margin-bottom: 10px;text-align: right;">张时乐</div>
            <div style="text-align: right;color: #3655a5">复旦大学管理学、经济学博士</div>
          </div>

          <div class="personIntruduce">
            <h4>个人简介</h4>
            <p>现任</p>
            <p>沈阳航科智能系统有限公司 董事长</p>
            <p style="margin: 20px 0 0 0;">曾担任</p>
            <p v-for="item in personIntroduce" :key="item">{{ item }}</p>
            <h4 style="margin-top: 40px;">学术与项目</h4>
            <p>
              产业经济学、管理学、企业心理学、社会学大数据科学
              移动互联网、工业互联网、金融工程、消费心理与行为数字建模、企业数字文化与战略、数字组织创新、企业内控、超维博弈论

            </p>
          </div>
          <div class="personIntruduce">
            <h4>项目方向</h4>
            <div v-for="(item,index) in projectList" :key="index">
            <p>{{ item.title }}</p>
            <p style="padding-left: 2rem;" v-for="el in item.detail">{{ el }}</p>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="bg" style="padding-bottom: 40px;">
      <h3 style="position: relative; top: 50px">
        办公场地介绍
      </h3>
      <div class="group" style="margin-top: 20px;">
        <div style="margin-top:80px;margin-left: 10%;">
          <div v-for="(item, index) in companyData" :key="index" class="lineNew">
            <h3>{{ item.id }}</h3>
            <div>{{ item.title }}</div>
          </div>
        </div>
        <img src="../assets/image/HK/company.jpg" alt="" class="company" />
      </div>
    </div>
    <div>
      <h3 style="position: relative; top: 50px">
        团队发展
      </h3>
      <div class="group" style="margin-top: 80px;">
        <img src="../assets/image/HK/team.png" alt="" style="padding: 0 10%;height: 500px;"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperIndex: 0,
      companyData: [
        { id: '01', title: "沈阳浑南,国际产业园,办公面积1200平方米，厂房面积2000平方米" },
        { id: '02', title: "从华东地区移转工业互联网前端开发团队来沈阳" },
        { id: '03', title: "在沈阳建立工业互联网 开发测试业务支持全国" },
        { id: '04', title: "移转华东地区 光谱分析产品线到沈阳" },
        { id: '05', title: "建立自动化流程控制器开发团队" },
      ],
      data: [
        {
          id: "01",
          title: "数字化智能化集成解决方案",
          list: [
            { status: 1, message: "服务对象：大中型企业、地方政府、产业园区" },
            { status: 1, message: "自有的“三点两线一景”的数字化方法论框架" },
            { status: 1, message: "提供集生产制造、智慧楼宇园区、营销物流、供应链金融等管控全流程的咨询与规划解决方案" },
            { status: 1, message: "提供数字化、智能化、零碳化管控系统方案" },
            { status: 1, message: "提供市场营销商业智能系统方案（含实时大数据分析）" },
            { status: 1, message: "面向塔灯工厂、智慧工厂的解决方案" },
          ],
        },
        {
          id: "02",
          title: "大数据治理与可视化",
          list: [
            { status: 1, message: "服务对象：能源管理、医院、基础设施运维企业" },
            { status: 1, message: "自有的实时非结构化大数据平台和BI分析能力" },
            { status: 1, message: "提供大数据可视化BI分析平台及决策系统，以及数据安全系统" },
            { status: 1, message: "提供社会基础设施、企业设备云运维及大数据平台" },
            { status: 1, message: "提供基于数据架构治理、AI工具应用、数据湖等方法论的解决方案，从而实现数据价值化与资产化" },
          ],
        },
        {
          id: "03",
          title: "工业互联网应用及网络安全",
          list: [
            { status: 1, message: "服务对象：制造业企业、基础设施运维企业" },
            { status: 1, message: "自有的工业互联实施框架，流程引擎，工业区块链技术、低代码开发以及RPA能力" },
            { status: 1, message: "提供适用于离散制造、连续制造业MOM平台（含225个模块）" },
            { status: 1, message: "工业互联网云MES平台（含线下部署和在线云部署）" },
            { status: 1, message: "工业互联网基础安全及区块链安全" },
            { status: 1, message: "网络舆情和网络行为实时大数据系统" },
          ],
        },
      ],
      hoverIndex1: -1,
      personIntroduce: [
        "创新工场点心战略总监",
        "点心操作系统上海分公司总经理",
        "戴尔（DELL）中国设计中心高级经理",
        "迪德克斯（ADAPTIX）中国区副总裁",
        "惠普HP Thin Client研发总监"
      ],
      projectList: [
        {
          title: '1、移动互联网、工业互联网项目设计',
          detail: [
            "-- TMT与高精制造业管理制造系统设计和实施",
            "-- 离散制造和连续制造数字化、智能化、零碳化、 安全化设计实施",
            "-- 工业互联网网络安全和网络安全部署",
            "-- 小数据和深度数据分析"
          ]
        },
        {
          title: '2、现代服务业数字化工程',
          detail: [
            "-- 机器人与人工智能工程",
            "-- 大数据医疗",
            "-- 企业营销以及市场工程"
          ]
        },
        {
          title: '3、大数据基础型项目',
          detail: [
            "-- 物联网中台和数据分析中台",
            "-- 工业互联网分布式数据中台"
          ]
        },
        {
          title: '4、数字制造运营管理平台（离散和连续制造）系统设计',
          detail: []
        },
        {
          title: '5、区块链应用',
          detail: [
            "-- 去中心化规范社区和工业互联网分布式制造研究",
            "-- 组织创新：数字分线权在各类行业中的应用"
          ]
        },
        {
          title: '6、企业内控管理和企业心理学研究体系',
          detail: []
        },
        {
          title: '7、管理者心智成长路径研究以及组织权力体系的建立方法',
          detail: []
        },
      ]
    };
  },
  methods: {
    change(index) {
      console.log(index);
      this.swiperIndex = index;
    },
    hover1(index) {
      this.hoverIndex1 = index;
    },
  },
};
</script>

<style  scoped>
.overview {
  text-align: center;
  width: 100%;
  padding: 120px 0;
  font-weight: 400;
}

.bg {
  background-color: #f5f7fa;
}

.product {
  width: 60%;
}

h3 {
  margin: 0;
  font-weight: bold;
  font-size: 32px;
  display: inline-block;
}

.group {
  display: flex;
  align-items: center;
  text-align: left;
}

.map {
  width: 35%;
  margin-right: 10%;
}

.company {
  width: 35%;
  margin-left: 10%;
  margin-top: 50px;
}

.lineNew {
  display: flex;
  align-items: center;
  margin-bottom: 36px;
}

.line {
  display: flex;
  align-items: flex-end;
  margin-bottom: 36px;
}

.line h3 {
  color: #3655a5;
  margin: 0;
  margin-right: 18px;
}

.lineNew h3 {
  color: #3655a5;
  margin: 0;
  margin-right: 18px;
}

.area {
  width: 60%;
  margin: 0 auto;
  padding-bottom: 20px;
}

img {
  height: auto;
  width: 100%;
}

.groupNew {
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 2px;
}

.case {
  margin: 20px 0;
  display: flex;
  justify-content: space-around;
  text-align: left;
  color: #999fb3ff;
}

.case>div {
  width: 30%;
}

.title {
  color: #3655a5ff;
  font-weight: bold;
}

.content {
  padding: 20px 5%;
}

.active {
  background-color: #fff;
  box-shadow: 20px 20px 40px rgba(54, 85, 165, 0.4);
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(54, 85, 165, 0.08);
  transition: all .5s;
}

.active .title {
  color: #3c9bc7ff;
}

.active .list {
  color: #04113bff;
}

ul {
  padding-inline-start: 18px;
}

.person {
  width: 300px;
}

h4 {
  color: #3655a5;
  font-size: 20px;
  font-weight: 600;
}

.personIntruduce {
  margin-left: 40px;
  width: 40%;
}

.personIntruduce p {
  display: block;
  line-height: 30px;
  letter-spacing: 3px;
}
</style>
 -->



<template>
  <div class="about">
    <div class="header">
      <img src="../assets/image/introduce.jpg" alt="">
      <div class="introduce">
        <h3>公司简介</h3>
        <p>
          沈阳航科智能系统有限公司，是一家专注于企业/行业数字化与智能化的技术服务型公司，帮助企业/行业业务上云和AI+，实现降本增效和业务创新。
        </p>
      </div>
    </div>
    <main>
      <div class="position">
        <h3 style="width:50%">企业定位</h3>
        <p class="desc">
          企业流程自动化、企业数字化转型、制造业人工智能化、行业地方政府资产安全化,金融化议题 经营 方案提供商和设计运营商、双碳绿色能源整体方案提供者。
        </p>
      </div>
      <div style="margin-bottom: 120px">
        <h3 style="padding-bottom: 20px;">公司环境</h3>
        <div class="environment">
          <div v-for="(item, index) in envData" :key="index" class="normal" :class="hoverIndex == index ? 'active' : ''"
            @mouseenter="hover(index)">
            <img :src="item.image" alt="" />
            <p>{{ item.title }}</p>
          </div>
        </div>
      </div>
      <div class="certificate">
        <div class="certificate_content">
          <div style="display: flex;width: 49%;flex-wrap: wrap;">
            <img v-for="el in companyList" :src="el" alt="">
          </div>
          <img src="../assets/image/HK/companyIntruduce/5.png" alt="" style="width:49%;">
        </div>
        <h3>公司相关证书和软件著作权</h3>
      </div>
      <div class="join">
        <div class="join-left">
          <h3>加入我们</h3>
          <p style="font-weight: 500">
            我们鼓励学习创新并追求极致<br />
            航科智能系统期待您的加入
          </p>
          <p class="join-desc">
            我们提倡员工与公司、与部门、与团队共同成长，互相成就，长期陪伴。
            我们提倡面对不确定性的未来，要积极地拥抱变化，勇于尝试和探索未知
            我们提倡快速反应，精准执行。追求速度，追求质量，追求卓越
          </p>
          <p style="color:#3655A5FF;font-weight:500">简历投递邮箱：hangkezhineng@yeah.net</p>
        </div>

        <el-tabs type="border-card" class="join-right">
          <el-tab-pane :label="item.title" v-for="(item, index) in list" :key="index">
            <p style="font-weight: bold">岗位要求</p>
            <p v-for="(l, j) in item.list" :key="j" style="font-size:14px">
              {{ j + 1 }}、{{ l }}
            </p>
          </el-tab-pane>
        </el-tabs>
      </div>
    </main>
    <div class="map">
      <Map class="container"></Map>
      <div class="contact">
        <h3>联系我们</h3>
        <p>
          邮箱：Hangke_024@163.com<br />
          地址：沈阳市浑南区国际软件园d09座317
        </p>
      </div>
    </div>
    <div class="map">
      <Maps class="container1"></Maps>
      <div class="contact">
        <h3>联系我们</h3>
        <p>
          邮箱：Hangke_024@163.com<br />
          地址：上海市浦东新区盛夏路608号3幢307-308室
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import environment1 from "../assets/image/environment1.png";
import environment2 from "../assets/image/environment2.png";
import environment3 from "../assets/image/environment3.png";
import environment4 from "../assets/image/HK/company.jpg";
import company1 from "../assets/image/HK/companyIntruduce/1.jpg"
import company2 from "../assets/image/HK/companyIntruduce/2.jpg"
import company3 from "../assets/image/HK/companyIntruduce/3.jpg"
import company4 from "../assets/image/HK/companyIntruduce/4.jpg"
import Map from "../components/Map.vue";
import Maps from "../components/Map_shanghhai.vue";
export default {
  data() {
    return {
      list: [
        {
          title: "前端工程师（Web&Mobile）",
          list: [
            "计算机相关专业，1年以上前端开发工作经验；",
            "熟悉HTML、CSS、JavaScript 、TypeScript等基础语言，熟悉HTML5、CSS3、ES6的新特征；",
            "熟悉Angular、React、Vue等至少一种主流框架、熟悉git相关操作；",
            "对组件化开发、性能优化、多人协作开发有一定的见解；",
            "良好的沟通能力、团队协作精神，良好的学习能力和逻辑分析能力",
            "加分项：熟练掌握TypeScript语言，有Echart等相关项目开发经验，熟悉Angular等相关开发技术，有自己的开源项目或博客。",
          ],
        },
       
        {
          title: "Java开发工程师",
          list: [
            "1年以上java开发经验，有独立开发和部署后台的经验；有搭建和使用Jenkins经验。熟练掌握常用数据结构与算法、常用设计模式等。",
            "熟练掌握Http/socket通信、多线程、mysql数据库的编程开发；",
            "1年以上基于spring框架的设计开发实际经验；",
            "熟悉MYSQL数据库的使用、配置及优化；有linux服务器管理、Jekins经验者优先",
            "1年以上基于Redis缓存数据库的设计开发经验",
            "良好的沟通能力与团队协作能力，良好的问题解决能力与较强的学习能力，较强的逻辑思考能力，思维缜密，有责任心和时间观念。",
          ],
        },
        {
          title: "产品经理",
          list: [
            "通过对公司产品的目标客群分析、市场需求调研、用户调研、数据挖掘深度洞察用户需求、发展趋势研究及竞品分析，制定相应的产品方案；",
            "负责跟客户沟通定制化软件的总体规划和产品需求，整理出需求文档和产品版本迭代计划，有企业服务软件或工厂服务软件设计者这优先；",
            "协助项目经理推进项目需求内容的技术实现，协助技术团队把控需求实现质量；",
            "与技术团队沟通需求实现方案，评审需求文档；",
            "会设计产品原型图者优先考虑。"
          ],
        },
        
        {
          title: "企业数字化商务经理",
          list: [
            "负责开发客户资源，通过电话、邮件、上门拜访、参加展会等方式拓展企业软件定制服务和工业互联网等客户资源（企业定制软件、企业业务上云服务、工厂数字化服务、设备云管理运维与大数据增值服务）；",
            "全面掌握市场开拓业务知识及流程，分析客户需求并为其定制个性化服务方案；",
            "维护激活客户资源，挖掘客户深层次需求；",
            "负责对大客户进行相关数据和工作行为分析，总结其相关属性特征，协助客户使用过程中的满意度沟通，确保产品的美誉度；",
            "可独立开展市场推广活动，有对应行业资源的优先；",
            "底薪加高提成方式，以业绩为主。",
          ],
        },
      ],
      envData: [
        { title: "园区环境", image: environment1 },
        { title: "办公环境", image: environment2 },
        { title: "办公环境", image: environment3 },
        { title: "办公场地", image: environment4 },
      ],
      companyList: [company1, company2, company3, company4],
      hoverIndex: 1,
    };
  },
  mounted() {
    // console.log(Map, 'map')
  },
  components: {
    Map,
    Maps
  },
  methods: {
    hover(index) {
      this.hoverIndex = index;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.about {
  width: 100%;
  background-image: url("../assets/image/bg5.png");
  background-size: 100% 100%;
  font-size: 16px;
  line-height: 30px;
}

.header {
  position: relative;
}

.header img {
  width: 100%;
  height: 100%;
}

.introduce {
  width: 100%;
  height: 100%;
  padding-left: 50%;
  padding-right: 15%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
}

h3 {
  font-size: 32px;
}

main {
  width: 70%;
  margin: 0 auto;
}

.environment {
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.environment div {
  background-color: #fff;
  padding: 16px;
}

.normal {
  width: 30%;
}

.active {
  /* width: 40%;
  box-shadow: 0px 8px 40px rgba(54, 85, 165, 0.08);
  transition: all .2s; */
  box-shadow: 0px 8px 40px rgba(54, 85, 165, 0.3);
  transform: scale(1.25);
  transition: all .5s;

}

.active img,
.normal img {
  width: 100%;
}

.position {
  margin: 0 auto;
  box-shadow: 0px 8px 40px rgba(54, 85, 165, 0.08);
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  border-radius: 16px;
  position: relative;
  top: -50px;
  padding: 0 5%;
}

.desc {
  color: #999fb3ff;
}

.certificate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 120px;
}

.certificate .certificate_content {
  width: 60%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.certificate .certificate_content img {
  width: 50%;
}

.join {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 120px;
}

.join-left {
  width: 35%;
  margin-bottom: 20px;
}

.join-right {
  width: 60%;
}

.join-desc {
  color: #999fb3ff;
  margin: 20px 0;
}

.map {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.container {
  width: 60%;
  margin-right: 10%;
  height: 400px;
  box-shadow: 4px 4px 40px rgba(54, 85, 165, 0.08);
}

.container1 {
  width: 60%;
  margin-right: 10%;
  height: 400px;
  box-shadow: 4px 4px 40px rgba(54, 85, 165, 0.08);
}

.contact {
  width: 30%;
}

.contact p {
  font-weight: 500;
}

</style>
